<template>
	<h2>父组件-学习使用子组件的插槽</h2>
	message：{{message}}
	<SubSlot>
		<h4>{{message}}</h4>
	</SubSlot>
	
	<SubSlot>
		<template v-slot:header>
			这是文章的头部区域
		</template>
		<template #content>
			这是文章的内容区域
		</template>
		<template #footer>
			这是文章的尾部区域
		</template>
	</SubSlot>
	
	<h3>作用域插槽：接收子组件的数据显示</h3>
	<SubSlot>
		<template v-slot:header='scope'>
			<p>{{scope}}</p>
			<p>{{scope.msg}}</p>
			<p>{{scope.txt}}</p>
		</template>
		<template #content="{user}">
			<p>{{user}}</p>
			<p>{{user.name}}</p>
			<p>{{user.age}}</p>
		</template>
		<template #footer>
			
		</template>
	</SubSlot>	
</template>

<script setup>
	import SubSlot from './SubSlot.vue'
	//定义数据
	const message='这是父组件定义的数据'
</script>

<style scoped>
</style>